<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： menus.html
  ~ Date：18-9-17 下午5:21
  ~ Author: guomw
  -->

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href="../../resource/css/style-diy.css?v=4.0.0" rel="stylesheet"
          th:href="@{/resource/css/style-diy.css?v=4.0.0}"/>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>

    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">

    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>

    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/hotui/css/switchery.min.css"
          th:href="@{/resource/hotui/css/switchery.min.css}" rel="stylesheet"/>
    <link href="../../resource/lib/bootstrap-daterangepicker/daterangepicker.min.css"
          th:href="@{/resource/lib/bootstrap-daterangepicker/daterangepicker.min.css}" rel="stylesheet">
    <link href="../../resource/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css"
          th:href="@{/resource/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css}" rel="stylesheet"/>
    <link href="../../resource/hotui/css/awesome-bootstrap-checkbox.min.css"
          th:href="@{/resource/hotui/css/awesome-bootstrap-checkbox.min.css}"
          rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>社区结构管理</h5>
                </div>
                <div class="ibox-content">

                    <div class="dd" id="nestable2">
                        <ol class="dd-list">
                            <li class="dd-item" data-id="0">
                                <div class="dd-handle">
                                    <span class="label label-info"><i class="fa fa-home"></i></span> 根节点
                                </div>
                                <div class="btn-a-items">
                                    <div class="btn-content header">
                                        <span>描述</span>
                                        <span>排序</span>
                                    </div>
                                    <div class="btn-right">
                                        <a type="button" class="btn-a" data-toggle="modal" data-target="#addMenuModal"
                                           onclick="editHelper.setResident(0,0);">添加子楼层</a>
                                    </div>
                                </div>
                                <div id="strList">

                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="set_resident_modal" class="modal-content-tag">
    <form id="residentModelForm">
        <div class="form-group">
            <label class="col-sm-4 control-label">楼层名称：</label>
            <div class="col-sm-8">
                <input id="strId" name="strId" minlength="2" type="hidden" class="form-control"
                       value="0">
                <input id="pstrId" name="pstrId" minlength="2" type="hidden" class="form-control"
                       value="0">
                <input id="strName" type="text" class="form-control" name="strName">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">楼层描述：</label>
            <div class="col-sm-8">
                <input id="strDesc" type="text" class="form-control" name="strDesc">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">排序：</label>
            <div class="col-sm-8">
                <input id="itemSort" type="number" class="form-control" name="itemSort" value="0">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">楼层类型：</label>
            <div class="col-sm-8">
                <input id="strType" type="text" class="form-control" name="strDesc">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">楼层地图:</label>
            <div class="col-sm-8">
                <input type="hidden" id="imgUrl" value=""/>
                <input type="hidden" id="imgPath" value=""/>
                <input type="file" style="display: none" id="uploadfile" name="uploadfile" readonly="readonly"
                       class="form-control">

                <a title="选择图片">
                    <img id="imgpreview" class="imgpreview" src="../../resource/img/bg.png"
                         onerror="this.src='/resource/img/bg.png'"
                         style="margin-top: 10px; width:110px;height:110px;"
                    />
                </a>
            </div>
        </div>
    </form>
</div>
<!--基础框架js-->
<script src="../../resource/js/jquery.min.js" th:src="@{/resource/js/jquery.min.js?20190316}"></script>
<script src="../../resource/js/bootstrap.min.js" th:src="@{/resource/js/bootstrap.min.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>

<script src="../../resource/hotui/js/plugins/datetimepick/js/moment.min.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/moment.min.js}"></script>

<script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>

<script src="../../resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
<script src="../../resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js}"></script>

<script src="../../resource/js/switchery.min.js" th:src="@{/resource/js/switchery.min.js}"></script>
<script src="../../resource/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/resource/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="../../resource/js/plugins/validate/messages_zh.min.js"
        th:src="@{/resource/js/plugins/validate/messages_zh.min.js}"></script>

<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-validate.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-validate.js}"></script>


<script src="../../resource/js/plugins/hot/Jquery.util.js"
        th:src="@{/resource/js/plugins/hot/Jquery.util.js?20191026}"></script>

<script type="text/javascript" th:inline="javascript">
    const residentBase = /*[[@{/resident}]]*/  "/resident";
    const relList = /*[[@{/resident/locator/structure/rel/list}]]*/  "";
</script>
<script>
    $(function () {
        treeHelper.createTree();

    });
    var treeHelper = {
        //创建树
        createTree: function () {
            $.ajax({
                url: residentBase + "/structure/tree/data",
                type: "post",//请求方式
                success: function (apiResult) {
                    if (apiResult.resultCode === 2000) {
                        if (apiResult.data == null || apiResult.data.length == 0) {
                            return;
                        }
                        $("#strList").html(treeHelper.childTree(apiResult.data));
                    }
                }, error: function () {

                },
                dataType: "json" //服务器响应的数据格式
            });
        },
        childTree: function (tree) {
            var parentTree = "";
            $.each(tree, function (index, item) {
                var content = '<ol class="dd-list">' +
                    '<li class="dd-item" data-id="' + item.strId + '">'
                if (item.nodes != null && item.nodes.length > 0) {
                    content += "<button class='" + (item.itemFunction ? "itemFunction" : "") + "' onclick=\"treeHelper.collapse(this)\" data-action=\"collapse\" type=\"button\" style=\"display: block;\">关闭</button><button onclick=\"treeHelper.expand(this)\" data-action=\"expand\" type=\"button\" style=\"display: none;\">展开</button>";
                }
                content += '<div class="dd-handle">' + item.text + '</div>' +
                    '<div class="btn-a-items">' +
                    '<div class="btn-content">' +
                    '<span>' + item.desc + '</span>' +
                    '<span>' + item.sort + '</span>' +
                    '</div>' +
                    '<div class="btn-right">';

                content += '<a type="button" class="btn-a" data-toggle="modal" ' +
                    'onclick="editHelper.setResident(' + item.strId + ',' + item.pstrId+ ',\'' + item.text + '\',\'' + item.desc
                    + '\',\'' + item.url
                    + '\',\'' + item.sort
                    + '\',\'' + item.type
                    + '\',\'' + item.allUrl + '\');">编辑</a>&nbsp;&nbsp;';
                content += '<a type="button" class="btn-a" data-toggle="modal" onclick="editHelper.delete(' + item.strId + ')">删除</a>&nbsp;&nbsp;';
                content += '<a type="button" class="btn-a" data-toggle="modal" onclick="editHelper.setResident(0,' + item.strId + ');">添加子楼层</a>&nbsp;&nbsp;';
                content += '<a type="button" class="btn-a" data-toggle="modal" onclick="editHelper.showRel(' + item.strId + ',\'' + item.text + '\');">定位器</a>';
//                    ' {btnItems}' +
                content += '</div></div>';
                //递归调用自己
                if (item.nodes != null && item.nodes.length > 0) {
                    content += treeHelper.childTree(item.nodes);
                }
                content += '</li>';
                content += '</ol>';
                parentTree += content;
            });
            return parentTree;
        },
        expand: function (obj) {
            $(obj).parent().children(".dd-list").show();
            $(obj).parent().children("button").show();
            $(obj).hide();
        },
        collapse: function (obj) {
            $(obj).parent().children(".dd-list").hide();
            $(obj).parent().children("button").show();
            $(obj).hide();

        },
    }
    var setResidentModel = $("#set_resident_modal").modal("楼层信息", function () {
        $("#residentModelForm").submit();
    });

    var editHelper = {
        delete: function (id) {
            var requestData = {
                id: id,
            };
            hot.confirm("确定执行此操作？", function () {
                hot.ajax(residentBase + "/delete/structure", requestData, function (apiResult) {
                    if (apiResult.resultCode == 2000) {
                        window.location.reload();
                    } else {
                        hot.tip.error("操作失败--" + apiResult.resultMsg);
                    }
                }, function () {
                }, "post", 300);
            });
        },
        setResident: function (strId, pstrId, strName, strDesc, imgPath, itemSort, type, imgUrl) {
            setResidentModel.show(function () {
                $("#strId").val(strId);
                $("#pstrId").val(pstrId);
                if (strId > 0) {
                    $("#strName").val(strName);
                    $("#strDesc").val(strDesc);
                    $("#imgPath").val(imgPath);
                    $("#itemSort").val(itemSort);
                    $("#strType").val(type);
                    if (imgUrl != null || imgUrl != '') {
                        document.getElementById('imgpreview').src = imgUrl;
                    }
                }
                $("#residentModelForm").validateCallback(function () {
                    var requestData = {
                        structureId: $("#strId").val(),
                        pStructureId: $("#pstrId").val(),
                        name: $("#strName").val(),
                        description: $("#strDesc").val(),
                        mapUrl: $("#imgPath").val(),
                        itemSort: $("#itemSort").val(),
                        type: $("#strType").val(),
                    };
                    hot.ajax(residentBase + "/save/structure", requestData, function (apiResult) {
                        if (apiResult.resultCode == 2000) {
                            window.location.reload();
                        } else {
                            hot.tip.error("操作失败--" + apiResult.resultMsg);
                        }
                    }, function () {
                    }, "post", 300);
                })
            });
            $('.imgpreview').click(function () {
                $("#uploadfile").click();
            });
            $('body').delegate("#uploadfile", 'change', function () {
                hotUtil.loading.show();
                hotUtil.uploadImg($("#uploadfile")[0].files, "banner", function (url, path) {
                    hotUtil.loading.close();
                    $(".imgpreview").attr("src", url);
                    $("#imgPath").val(path);
                    $("#imgUrl").val(url);
                });
            });
        },
        save: function () {
            var requestData = {
                structureId: $("#strId").val(),
                pStructureId: $("#pstrId").val(),
                name: $("#strName").val(),
                description: $("#strDesc").val(),
                mapUrl: $("#imgPath").val(),
                itemSort: $("#itemSort").val(),
                type: $("#strType").val(),
            };
            hot.ajax(residentBase + "/delete/structure", requestData, function (apiResult) {
                if (apiResult.resultCode == 2000) {
                    window.location.reload();
                } else {
                    hot.tip.error("操作失败--" + apiResult.resultMsg);
                }
            }, function () {
            }, "post", 300);
        },
        showRel: function (structureId,name) {
            hot.iframeModal(relList + "?structureId=" + structureId, '45%', '60%',name+'附近定位器');
        }


    }

</script>
</body>
</html>